<template>
	<div class="page">
		<c-title :hide="false" text="家政服务"></c-title>
		<div class="top"></div>
		<div class="content">
			<div class="bar">
				<van-row gutter="20" class="topone">
					<van-col span="6" v-for="(item, index) in topList" :key="index" @click="xq(item.id)">
						<img :src="item.thumb" />
						<div class="name">
							{{ item.name }}
						</div>
					</van-col>
				</van-row>
				<div class="toplanmu">
					<div v-for="(item, index) in goodList" :key="index" class="goodList" @click="xq(item.id)">
						<img :src="item.thumb" /><br />
						{{ item.name }}
					</div>
				</div>
			</div>
		</div>
		<div class="botton">
			<div class="botonlanmus">
				<div class="goddslists" v-for="(item, index) in goods" :key="index" @click="tiaozhuan(item.id)">
					<div class="top_img">
						<img :src="item.thumb" alt="">
					</div>
					<div class="bot">
						<div class="name">
							{{ item.title }}
						</div>
						<div class="price">
							<div class="xj">
								￥{{item.price}}
							</div>
							<div class="yj">
								{{item.market_price}}
							</div>
						</div>
					</div>

				</div>
				<!--  <van-row>
          <van-col >
            <div>
                <img :src="item.thumb" alt="">
            </div>
            {{ item.title }}
          </van-col>
        </van-row> -->
			</div>
			<div class="botonlanmu">
				<div v-for="(item, index) in bottongoods" :key="index" class="goodList" @click="tiaozhuan(item.id)">
					<div class="image">
						<img :src="item.thumb" />
					</div>
					<div class="r">
						<div class="name">
							{{ item.title }}
						</div>
						<div class="price">
							<div class="xj">
								￥{{item.price}}
							</div>
							<div class="yj">
								{{item.market_price}}
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				topList: [],
				goodList: [],
				goods: [],
				bottongoods: [],
				id: 0
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			xq(id) {
				this.id = id;
				this.$router.push(
					this.fun.getUrl("newCatelist", {
						id
					}, {
						id
					})
				);
			},
			tiaozhuan(id) {
				this.id = id;
				this.$router.push(this.fun.getUrl("goods", {
					id
				}));
			},
			getList() {
				// 第一行
				$http.post("plugin.store-cashier.frontend.store.store-jz.get-top-class", {}).then(response => {
					if (response.result === 1) {
						this.topList = response.data;
					}
				});
				//  第二行
				$http.post("plugin.store-cashier.frontend.store.store-jz.get-outher-class", {}).then(response => {
					if (response.result === 1) {
						this.goodList = response.data;
					}
				});
				// 第三行
				$http.post("plugin.store-cashier.frontend.store.goods.get-goods-by-category-id-and-store-id-jz-v2", {})
					.then(response => {
						if (response.result === 1) {
							console.log(response);
							this.goods = response.data;
						}
					});
				$http.post("plugin.store-cashier.frontend.store.goods.get-goods-by-category-id-and-store-id-jz-v3", {})
					.then(response => {
						if (response.result === 1) {
							console.log(response, '123')
							this.bottongoods = response.data;
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		.content {
			.bar {
				// background: #fff;
				padding: 1rem;

				.topone {
					img {
						width: 5rem;
						height: 5rem;
					}

					name {
						text-align: center;
					}
				}

				.toplanmu {
					margin-top: 1rem;
					width: 100%;
					text-align: center;
					display: flex;
					align-content: flex-start;
					flex-flow: row wrap;

					.goodList {
						flex: 20%;

						img {
							width: 4rem;
							height: 4rem;
						}
					}
				}
			}
		}

		.botton {
			.botonlanmu {
				.goodList {
					display: flex;
					background-color: #fff;
					margin-bottom: 0.5rem;

					.r {
						.price {
							display: flex;

							.xj {

								color: #f00;

								font-size: 1rem;

							}

							.yj {

								text-decoration: line-through;

								color: #ccc;

								margin-left: 0.5rem;

								line-height: 1.5rem;



							}
						}

						.name {
							font-weight: 600;
							margin: 1rem 0;
						}
					}

					.image {
						margin-right: 1rem;

						img {
							width: 6rem;
							height: 6rem;
						}
					}
				}
			}

			.botonlanmus {
				display: flex;
				justify-content: space-between;
				padding: 0.5rem 1.5rem;

				.goddslists {
					width: 30%;
					margin: 0 0.2rem;
					border-radius: 0.5rem;

					.bot {
						text-align: left;
						background-color: #fff;
						padding: 0.5rem;

						.price {
							// display: flex;

							.xj {
								color: #f00;
								font-size: 1rem;
							}

							.yj {
								text-decoration: line-through;
								color: #ccc;
								margin-left: 0.5rem;
								line-height: 1.5rem;

							}
						}

						.name {
							font-weight: 600;
							margin-bottom: 0.5rem;
						}
					}

					.top_img {
						img {
							width: 100%;
							border-top-left-radius: 0.5rem;
							border-top-right-radius: 0.5rem;
							// border-radius: 0.5rem;
							height: 5rem;
						}
					}

				}

			}
		}
	}
</style>
